<template>
    <ul class="nav">
        <li v-for="(item, i) in navList" :key="i" :class="item.name == HeaderNavAvtive ? 'item item_avtive' : 'item'">
            <RouterLink @click="handleNavSwitch(item)" to="" class="nav_item">{{ item.name }}</RouterLink>
        </li>
    </ul>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { RouterLink, useRouter } from 'vue-router'
import type Nav from '@/components/home/type/headerNav'
import getCategorys from "@/composables/request/category/getCategorys";


const navList = ref<Nav[]>();
const router = useRouter();

const HeaderNavAvtive = ref(window.localStorage.getItem("HeaderNavAvtive") || navList.value);


async function getCategory() {
    const res = await getCategorys();
    res.unshift({ id: 0, name: "首页" })
    navList.value = res;

}
getCategory();
function handleNavSwitch(item: Nav): void {
    HeaderNavAvtive.value = item.name;
    window.localStorage.setItem("HeaderNavAvtive", item.name);
    if (item.id != 0) {
        router.push(`/${item.id}`)
    } else {
        router.push(`/`)
    }
}

</script>

<style lang="less" scoped>
.nav {
    margin-top: 40px;
    display: flex;

    .item {
        padding: 8px 15px;
        margin-right: 10px;

        a {
            color: var(--content-color);
        }

        &:last-child {
            margin-right: 0;
        }
    }

    .item_avtive,
    .item:hover {
        background: var(--black-primary);
        border-radius: 20px;
        box-shadow: 0 3px 10px var(--box-shadow-color);

        a {
            color: var(--white-primary);
        }
    }


}
</style>